'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-6 md:p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm">
        <h1 className="text-4xl font-bold text-center mb-8">AI老照片修复</h1>
        
        <div className="bg-white/30 p-6 rounded-lg shadow-lg backdrop-blur-sm">
          <div className="text-center mb-8">
            <p className="text-xl mb-4">
              使用最先进的AI技术修复和增强您珍贵的老照片
            </p>
            <div className="flex flex-col md:flex-row justify-center gap-6 mt-8">
              <Link 
                href="/restore" 
                className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
              >
                开始修复照片
              </Link>
              <Link 
                href="/about" 
                className="px-6 py-3 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors"
              >
                了解更多
              </Link>
            </div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
            <div className="bg-white/50 p-4 rounded-lg text-center">
              <div className="text-3xl mb-2">🖼️</div>
              <h3 className="text-lg font-bold mb-2">修复损坏的照片</h3>
              <p>修复褪色、划痕、撕裂和其他损坏</p>
            </div>
            <div className="bg-white/50 p-4 rounded-lg text-center">
              <div className="text-3xl mb-2">🎨</div>
              <h3 className="text-lg font-bold mb-2">增强色彩</h3>
              <p>恢复黑白照片的色彩或增强褪色的色调</p>
            </div>
            <div className="bg-white/50 p-4 rounded-lg text-center">
              <div className="text-3xl mb-2">✨</div>
              <h3 className="text-lg font-bold mb-2">提高清晰度</h3>
              <p>提升模糊照片的清晰度和细节</p>
            </div>
          </div>
          
          <div className="mt-12">
            <h2 className="text-2xl font-bold text-center mb-6">使用前后对比</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="relative h-64 bg-gray-200 rounded-lg overflow-hidden">
                <div className="absolute inset-0 flex items-center justify-center text-gray-500">
                  修复前示例
                </div>
              </div>
              <div className="relative h-64 bg-gray-200 rounded-lg overflow-hidden">
                <div className="absolute inset-0 flex items-center justify-center text-gray-500">
                  修复后示例
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}
